// 模拟从Hugging Face API获取的数据
const models = [
    { id: 'chatglm3', name: 'chatglm3', description: 'ChatGLM-6B 是智普AI开源的、可商用的、支持中英双语问答的对话语言模型，基于 General Language Model (GLM) 架构，具有 62 亿参数。使用量化技术后可以在CPU或消费级显卡上执行。', tags: ['文本生成', '工具调用'], 'url': 'https://www.baidu.com/', 'tryUrl': 'http://192.168.1.245:8501/' },
	{ id: 'llama2-chinese', name: 'llama2中文', description: 'llama2是由Meta AI开源的、可商用的大语言模型，开发者使用中文预料微调70亿参数后得到了llama2中文模型，经过量化技术转换后可以在CPU或消费级显卡上运行。', tags: ['文本生成', 'llama2'], 'url': 'https://www.baidu.com/', 'tryUrl': 'http://192.168.1.245:3000/' },

];

const sleep = time => {
  return new Promise(resolve => setTimeout(resolve, time)
  )
};

// 打开尝试链接的函数
function openTryUrl(url) {
	console.log(url);
    window.open(url, '_blank'); // 在新窗口或标签页中打开链接
}
	
// 更新模型状态
function updateStatus(modelId, data) {
	console.log(data);
	if (data.code == 0) {
		status = 'RUNNING'
	} else {
		status = 'ERROR'
	}
    const statusTag = document.getElementById(`status-tag-${modelId}`);
    statusTag.textContent = status;

    const startBtn = document.getElementById(`start-btn-${modelId}`);
    const tryBtn = document.getElementById(`try-btn-${modelId}`);

    if (status === 'RUNNING') {
        startBtn.classList.add('hidden'); // 隐藏启动按钮
		startBtn.disabled = true; // 启用尝试按钮
        tryBtn.disabled = false; // 启用尝试按钮
		tryBtn.addEventListener('click', () => openTryUrl(tryBtn.url));

    } else if (status === 'PENDING') {
        startBtn.classList.remove('hidden'); // 显示启动按钮
        tryBtn.disabled = true; // 禁用尝试按钮
    } else {
		startBtn.disabled = false; 
		statusTag.textConten = data.msg;
		tryBtn.disabled = true; // 禁用尝试按钮
	}
}



// 启动服务（模拟）
function startService(modelId) {
	const startBtn = document.getElementById(`start-btn-${modelId}`);
	startBtn.classList.add('hidden'); // 隐藏启动按钮
    startBtn.disabled = true; // 启用尝试按钮
    // 这里可以发送异步请求到后端API来启动服务
    // 假设服务启动成功，更新状态
	console.log(`http://192.168.1.43:13246/configuration/loadModel/?id=${modelId}`)
	fetch(`http://192.168.1.43:13246/configuration/loadModel/?id=${modelId}`)
	  .then(response => response.json())
	  .then(data => updateStatus(modelId, data))
      .catch(error => updateStatus(modelId, {'code': 500, 'msg': error}))
	  ;
}


// 创建模型卡片
function createModelCard(model) {
    const card = document.createElement('div');
    card.classList.add('model-card');

    // 添加模型名称和链接
    const title = document.createElement('h3');
    const titleLink = document.createElement('a');
    titleLink.href = model.url;
    titleLink.textContent = model.name;
    title.appendChild(titleLink);
    card.appendChild(title);

    
	// 添加状态标签
    const statusElement = document.createElement('span');
    statusElement.classList.add('tag', 'status-tag');
    statusElement.id = `status-tag-${model.id}`;
    statusElement.textContent = 'PENDING'; // 初始状态为PENDING
    card.appendChild(statusElement);

    // 添加操作按钮
    const actionButtonsContainer = document.createElement('div');
    actionButtonsContainer.classList.add('action-buttons');

    const startBtn = document.createElement('button');
    startBtn.classList.add('start-btn');
    startBtn.id = `start-btn-${model.id}`;
    startBtn.textContent = '启动服务';
    startBtn.addEventListener('click', () => startService(model.id));
    actionButtonsContainer.appendChild(startBtn);

    const tryBtn = document.createElement('button');
    tryBtn.classList.add('try-btn');
    tryBtn.id = `try-btn-${model.id}`;
    tryBtn.textContent = '尝试一下';
	console.log(model.tryUrl);
	tryBtn.url = model.tryUrl;
    tryBtn.disabled = true; // 初始状态禁用
    actionButtonsContainer.appendChild(tryBtn);
	card.appendChild(actionButtonsContainer);

	// 添加标签
    const tagsContainer = document.createElement('div');
    tagsContainer.classList.add('tags');
    model.tags.forEach(tag => {
        const tagElement = document.createElement('span');
        tagElement.classList.add('tag');
        tagElement.textContent = tag;
        tagsContainer.appendChild(tagElement);
    });
    card.appendChild(tagsContainer);
	
	
    // 添加描述
    const description = document.createElement('p');
    description.textContent = model.description;
	description.classList.add('.visible-text');
    card.appendChild(description);


    // 将卡片添加到页面
    document.getElementById('model-cards').appendChild(card);
}


// 将所有模型卡片添加到DOM中
function addModelCards() {
    const container = document.getElementById('model-cards-container');
    models.forEach(model => {
        createModelCard(model);
    });
}

// 在页面加载完成后添加模型卡片
document.addEventListener('DOMContentLoaded', addModelCards);

